<template>
  <custom-dialog ref="dialog" title="选择位置" width="60%" class="no-padding-body" :show-cancel-button="false"
    confirm-button-text="确定" :before-confirm="beforeConfirm" :on-confirm="afterConfirm">
    <div style="width:100%;height:600px;position: relative;">
      <el-input v-model="searchText" placeholder="请输入单位地址，按回车进行搜索"
        style="width: 300px; position: absolute; left: 20px; top: 20px;z-index: 9999"
        @keyup.enter.native="search"></el-input>
      <el-amap ref="amap" map-style="amap://styles/macaron" :zoom="20" :events="mapEvents"></el-amap>
    </div>
  </custom-dialog>
</template>

<script>
import CustomDialog from '@/components/custom-dialog'
import Vue from 'vue'
import VueAMap from '@/plugins/amap'

Vue.use(VueAMap)
export default {
  name: 'index',
  components: { CustomDialog },
  props: {
    value: String,
  },
  data() {
    return {
      map: null,
      searchText: '',
      mapEvents: {
        init: (map) => {
          this.map = map
        },
        click: (evt) => {
          const { lng, lat } = evt.lnglat
          const lnglat = `${lng},${lat}`
          this.$nextTick(() => {
            this.mark(lnglat)
            this.$emit('input', lnglat)
          })
        }
      },
    }
  },
  mounted() {
    const city = this.$store.state.user.cityCode || undefined
    this.geocoder = new window.AMap.Geocoder({
      city
    })
    this.marker = new window.AMap.Marker();
  },
  methods: {
    search() {
      const map = this.map;
      const marker = this.marker;
      const geocoder = this.geocoder;
      const that = this;
      if (this.searchText && map && marker) {
        geocoder.getLocation(this.searchText, function (status, result) {
          if (status === 'complete' && result.geocodes.length) {
            const lnglat = result.geocodes[0].location
            if (lnglat && lnglat.lng && lnglat.lat) {
              const pos = `${lnglat.lng},${lnglat.lat}`
              that.$emit('input', pos);
            }
            marker.setPosition(lnglat);
            map.clearMap();
            map.add(marker);
            map.setFitView(marker);
          } else {
            that.$message.warning('根据地址查询位置失败');
          }
        });
      }
    },
    open() {
      const lnglat = this.value
      this.$nextTick(() => {
        this.$refs.dialog.open()
        setTimeout(() => {
          this.mark(lnglat)
          if (lnglat) {
            this.map.setFitView()
          }
        }, 20)
      })
    },
    beforeConfirm() {
      return true
    },
    afterConfirm(close) {
      return new Promise((resolve) => {
        resolve()
        this.map.clearMap()
        this.$emit('change', this.value)
        close()
        this.searchText = ''
      })
    },
    mark(lnglat) {
      const AMap = window.AMap
      lnglat = (lnglat || '').split(',')
      if (AMap && lnglat.length === 2) {
        const marker = new AMap.Marker({
          position: lnglat
        })
        if (this.map) {
          this.map.clearMap()
          this.map.add(marker)
        }
      } else {
        if (this.map) {
          this.map.clearMap()
        }
      }
    },
  },
}
</script>

<style scoped>
.no-padding-body>>>.el-dialog__body {
  padding: 0;
}
</style>
